<template>
	<div class="sheepHome">
		<van-tabs swipeable v-model="active" title-active-color="#E15556" border>
			<div class="h_search">
				<img src="../static/i-search.png" />
			</div>
			<van-tab title="记账">
				<div class="h_bigbody">
					<div class="h_left" @click="showPicker=true">
						<img class="h_left-icon" src="../static/i-book.png" />
					</div>
					<van-popup v-model="showPicker" position="left" :style="{ width: '80%',height:'100%' }">
						<div class="h_littlebody">
							<div class="hi_font">
								<div class="hi_font_book">
									<span>账本</span>
								</div>
								<div class="hi_font_manage">
									<span>管理</span>
								</div>
							</div>
							<div class="hi_firstbody">
								<div class="hi_incomepay" style="margin-right: 30px;">
									<span class="hi_font-title">累计收入</span>
									<span class="hi_font-content">{{leijishouru}}</span>
								</div>
								<div class="hi_incomepay" style="margin-left: 30px;">
									<span class="hi_font-title">累计支出</span>
									<span class="hi_font-content">{{leijizhichu}}</span>
								</div>
							</div>
							<div class="hi_huiyuan">
								<span style="color: #D25C56;">开通会员</span>
								<span>后即可创建多个版本</span>
								<br />
								<span>普通用户可创建3个普通账本和1个共享账本</span>
							</div>
							<div class="hi_zhangben">
								<div class="hi_person">
									<div class="hi_title">
										<div class="hi_littlered"></div>
										<span>个人账本</span>
									</div>
									<div class="person_book">
										<div class="book_all">
											<div class="book_img" style="text-align: left;margin-left: 10px;">
												<img src="../assets/i_book.png" />
												<span style="color: #FFFFFF;">日 常 账 本</span>
												<div class="book_incomefont">
													<span>收入:{{richangzhangbenshouru}}</span>
													<br />
													<span>支出:{{richangzhangbenzhichu}}</span>
												</div>
											</div>
											<div class="book_img">
												<img src="../assets/i_addbook.png" />
												<span style="color: #999999;">添 加 账 本</span>
											</div>
										</div>

									</div>
								</div>
								<div class="hi_share">
									<div class="hi_title">
										<div class="hi_littlered"></div>
										<span>共享账本</span>
									</div>
									<div class="book_all">
										<div class="book_img">
											<img src="../assets/i_addbook.png" />
											<span style="color: #999999;">添 加 账 本</span>
										</div>
										<div class="book_img">
											<img src="../assets/i_white.jpg" />
										</div>
									</div>
								</div>
								<div style="width: 100%;height: 50px;"></div>
							</div>
						</div>
					</van-popup>

					<div class="h_middle">
						<div class="h_middle-button">
							<div class="h_add-budget">
								<a>添加预算</a>
							</div>
						</div>
						<div class="h_middle-body">
							<div class="h_middle-sbody">
								<div class="h_middle-little" style="margin-right: 30px;">
									<span class="h_font-title">1月收入</span>
									<span class="h_font-content">{{incometotal}}</span>
								</div>
								<div class="h_middle-middle"></div>
								<div class="h_middle-little" style="margin-left: 30px;">
									<span class="h_font-title">1月支出</span>
									<span class="h_font-content">{{outcometotal}}</span>
								</div>
							</div>
							<div :style="styleObject" class="h_middle-img" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
								<!-- <img src="../static/i-cat2.png" /> -->
								<div style="position: absolute;
								left: calc(50% - 1px);
								top: 0;
								bottom: 0;
								border-right: 1px solid #ebebeb;"></div>
								<div v-if="flag" v-for="(val,index) in spendList" :key='index'>
									<div class="homeShouRu" v-if="val.type=='收入'">
										<div class="shouruBox">
											<span class="homeTime">{{val.time}}</span>
											<img src="../assets/icon/inicon_9.png" class="homeNicePic" alt="">
											<p class="homeSpendTotal">{{val.money}}</p>
											<span class="homeSortSpend">{{val.type_name}}{{val.money}}</span>
										</div>
									</div>
									<div class="homeZhiChu" v-if="val.type=='支出'">
										<div class="zhichuBox">
											<img src="../assets/icon/inicon_1.png" class="homeNicePic" alt="">
											<span class="homeTime">{{val.time}}</span>
											<p class="homeSpendTotal">{{val.money}}</p>
											<span class="homeSortSpend">{{val.type_name}}{{val.money}}</span>
										</div>
									</div>
								</div>
							</div>
							<div class="h_middle-font">
								<span :style="styleObject" v-show="!flag">下拉记录第一笔吧</span>
							</div>
							<van-popup v-model="showPicker2" position="bottom" :style="{ height: '100%' }">
								<div class="homePopupTit">
									<img src="../assets/ar0.png" alt="" @click="showPicker2=false">
									<span>日常记账</span>
								</div>
								<van-tabs v-model="active">
									<van-tab title="支出">
										<div class="homeCal" :style="{background:bColor}">
											<span>{{sor}}</span>
											<input type="number" v-model="inputMoney">
										</div>
										<div class="homeSortLists">
											<div class="homeSortList" @click="bColor='orange';sor='餐饮'">
												<img src="../assets/icon/inicon_5.png" alt="">
												<p>餐饮</p>
											</div>
											<div class="homeSortList" @click="bColor='pink';sor='外出'">
												<img src="../assets/icon/inicon_2.png" alt="">
												<p>外出</p>
											</div>
											<div class="homeSortList" @click="bColor='blue';sor='美容'">
												<img src="../assets/icon/inicon_1.png" alt="">
												<p>美容</p>
											</div>
											<div class="homeSortList" @click="bColor='green';sor='人情'">
												<img src="../assets/icon/inicon_6.png" alt="">
												<p>人情</p>
											</div>
											<div class="homeSortList" @click="bColor='yellow';sor='居住'">
												<img src="../assets/icon/inicon_4.png" alt="">
												<p>居住</p>
											</div>
										</div>
										<div class="homeSortLists">
											<div class="homeSortList" @click="bColor='purple' ;sor='购物'">
												<img src="../assets/icon/inicon_3.png" alt="">
												<p>购物</p>
											</div>
											<div class="homeSortList" @click="bColor='palevioletred';sor='交通'">
												<img src="../assets/icon/inicon_9.png" alt="">
												<p>交通</p>
											</div>
											<div class="homeSortList" @click="bColor='blue';sor='娱乐'">
												<img src="../assets/icon/inicon_7.png" alt="">
												<p>娱乐</p>
											</div>
											<div class="homeSortList" @click="bColor='skyblue' ;sor='教育'">
												<img src="../assets/icon/inicon_8.png" alt="">
												<p>教育</p>
											</div>
											<div class="homeSortList" @click="bColor='palegreen';sor='其他'">
												<img src="../assets/icon/inicon_10.png" alt="">
												<p>其他</p>
											</div>
										</div>
										<button class="homeJL" @click="add">记一笔</button>
									</van-tab>
									<van-tab title="收入">
										<div class="homeCal" :style="{background:bColor}">
											<span>{{sor}}</span>
											<input type="number" placeholder="0.00" id="homeMoney">
										</div>
										<div class="homeSortLists">
											<div class="homeSortList" @click="bColor='orange';sor='工资'">
												<img src="../assets/icon/inicon_1.png" alt="">
												<p>工资</p>
											</div>
											<div class="homeSortList" @click="bColor='pink';sor='收红包'">
												<img src="../assets/icon/inicon_2.png" alt="">
												<p>收红包</p>
											</div>
											<div class="homeSortList" @click="bColor='blue';sor='生活费'">
												<img src="../assets/icon/inicon_3.png" alt="">
												<p>生活费</p>
											</div>
											<div class="homeSortList" @click="bColor='green';sor='奖金'">
												<img src="../assets/icon/inicon_4.png" alt="">
												<p>奖金</p>
											</div>
											<div class="homeSortList" @click="bColor='yellow';sor='报销'">
												<img src="../assets/icon/inicon_5.png" alt="">
												<p>报销</p>
											</div>
										</div>
										<div class="homeSortLists">
											<div class="homeSortList" @click="bColor='purple' ;sor='兼职'">
												<img src="../assets/icon/inicon_6.png" alt="">
												<p>兼职</p>
											</div>
											<div class="homeSortList" @click="bColor='palevioletred';sor='借入款'">
												<img src="../assets/icon/inicon_7.png" alt="">
												<p>借入款</p>
											</div>
											<div class="homeSortList" @click="bColor='blue';sor='投资收益'">
												<img src="../assets/icon/inicon_8.png" alt="">
												<p>投资收益</p>
											</div>
											<div class="homeSortList" @click="bColor='skyblue' ;sor='不明收入'">
												<img src="../assets/icon/inicon_9.png" alt="">
												<p>不明收入</p>
											</div>
											<div class="homeSortList" @click="bColor='palegreen';sor='其他收入'">
												<img src="../assets/icon/inicon_10.png" alt="">
												<p>其他收入</p>
											</div>
										</div>



									</van-tab>

								</van-tabs>
							</van-popup>
						</div>
					</div>
					<div class="h_right">
						<img class="h_right-icon" src="../static/i-diary.png" />
					</div>
				</div>
			</van-tab>

			<van-tab title="报表">
				<ReportForm></ReportForm>
			</van-tab>
		</van-tabs>
	</div>




</template>

<script>
import ReportForm from "../components/ReportForm.vue"
// @ is an alias to /src
export default {
  name: 'Home',
  components: {
	  ReportForm
  },
  data() {
  	return {
  		y: 0,
		move:0,
		styleObject:{
			"top":'0px'
		},
		
		showPicker:false,
		showPicker2: false,
		active:0,
		sor:'餐饮',
		bColor:'red',
		inputMoney: 0.00,
		flag: true,
		spendList: [],
		incometotal:0,
		outcometotal:0,
		leijishouru: 0,
		leijizhichu: 0,
		richangzhangbenshouru: 0,
		richangzhangbenzhichu: 0
  	}
  },
  created() {
	  var user_id = localStorage.getItem('user_id');
	  var month = (new Date()).getFullYear() + '0' + (new Date().getMonth() + 1);
	  this.axios.get("getNowMonthTotal?user_id=" + user_id + "&month=" + month).then(res => {
	  	this.spendList = res.data.data
	  	this.incometotal=res.data.incometotal
	  	this.outcometotal=res.data.outcometotal
		this.axios.get("getAccountBookTotal?user_id=" + user_id).then(res => {
			for(var i = 0; i < res.data.length; i++){
				if(res.data[i]._id.acc_book_type == "日常账本"){
					if(res.data[i]._id.type == "收入"){
						this.richangzhangbenshouru += res.data[i].total;
						this.leijishouru += res.data[i].total;
					} else if(res.data[i]._id.type == "支出"){
						this.richangzhangbenzhichu += res.data[i].total;
						this.leijizhichu += res.data[i].total;
					}
				}
			}
		});
	  })
  },
  updated(){
	console.log(this.$refs.chart)
  },
  mounted(){
	  var container = document.getElementById('chart');
	console.log(this.$refs.chart)
  },
  
  methods:{
	touchstart(e){
		this.y=Math.round(e.targetTouches[0].clientY);
	},
	touchmove(e){
		this.move=Math.round((e.targetTouches[0].clientY-this.y)/10) 
		this.styleObject.top=this.move+'px';
	},
	touchend(e){
		if(this.move > 10 || this.move == 0){
			this.showPicker2 = true;
		}
		this.move = 0;
		this.styleObject.top='0px';
	},
	showPopup() {
		this.setData({ show: true });
	},
	  
	onClose() {
		this.setData({ show: false });
	},
	add() {
		var data = new Date()
		data = data.getFullYear() + '0' + (data.getMonth() + 1) + data.getDate()
		console.log(data)
		var user_id = localStorage.getItem('user_id')
		var spend = {
			user_id: user_id,
			account_book_type: '日常账本',
			type: '支出',
			type_name: this.sor,
			money: this.inputMoney,
			time: data,
			account: '现金'
		}
		this.axios.post('add',spend).then(res=>{
			console.log(res)
			window.history.back();
		})
	}
	  
  },
}
</script>
<style>
	.van-tabs--line .van-tabs__wrap {
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
		background-color: white;
		z-index: 1;
		border-bottom: 1px solid #DCDCDC;
	}
	.home{
		width: 100%;
		height: 100%;
	}

	.tobar {
		width: 100%;
		height: 50px;
		background-color: #E70861;
	}

	.bigbody {
		width: 100%;
		height: calc(100% - 50px);
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.left {
		height: 100%;
	}

	.left-icon {
		margin-top: 7px;
		width: 35px;
		height: 35px;
	}

	.middle {
		width: calc(100% - 80px);
		height: 100%;

	}

	.add-budget {
		margin-top: 15px;
	}

	.add-budget>a {
		font-size: 14px;
		color: #343434;
		border: 1px solid #D6D6D6;
		padding: 3px 40px;
		border-radius: 20px;
	}

	.middle-sbody {
		margin-top: 3px;
		width: 100%;
		height: 80px;
		display: flex;
		flex-direction: row;
	}

	.middle-little {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.font-title {
		margin-top: 35px;
		color: #777777;
		font-size: 14px;
	}

	.font-content {
		margin-top: 15px;
		color: #333333;
		font-size: 18px;
	}

	.middle-middle {
		height: 200px;
		border-right: 1px solid #D6D6D6;
	}

	.middle-img {
		position: relative;
		top: 0px;
	}

	.middle-img>img {
		height: 350px;
		margin-right: 15px;
	}

	.middle-font>span {
		color: #727272;
		font-size: 20px;
		position: relative;
		top: 0px;
	}

	.right {
		height: 100%;

	}

	.right-icon {
		margin-top: 9px;
		width: 35px;
		height: 35px;
	}

	.homePopupTit {
		width: 100%;
		height: 44px;
		position: relative;
		line-height: 44px;
		z-index: 2;
		background-color: white;
	}
	.homePopupTit>img{
		position: absolute;
		left: 15px;
		height: 20px;
		width: 15px;
		margin-top: 10px;
	}

	.homePopupTit>span {
		font-size: 16px;
		color: #e70861;
	}

	.homeCal {
		margin-top: 5px;
		width: 100%;
		background: orange;
		height: 60px;
		line-height: 60px;
	}

	.homeCal>span {
		float: left;
		margin-left: 20px;
		font-size: 18px;
		color: white;
	}

	.homeCal>input {
		border: none;
		float: right;
		text-align: right;
		background: no-repeat;
		font-size: 20px;
		color: wheat;
		margin-right: 20px;
	}

	.homeSortLists {
		width: 100%;

		display: flex;
		justify-content: space-around;
	}

	.homeSortList {
		width: 15%;

		text-align: center;
		margin-top: 15px;
	}

	.homeSortList>img {
		height: 20px;
		width: 20px;
	}

	.homeSortList>p {
		font-size: 14px;
	}

	.sheepHome {
		width: 100%;
		height: 100%;
		background: white;
	}

	.h_search {
		position: absolute;
		top: 8px;
		left: 5px;
	}

	.h_search>img {
		height: 30px;
		width: 30px;
	}

	.h_bigbody {
		position: absolute;
		top: 44px;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background-color: white;
	}

	.h_left {
		height: 100%;
	}

	.h_left-icon {
		margin-top: 7px;
		width: 35px;
		height: 35px;
	}

	.h_middle {
		width: calc(100% - 80px);
		height: 100%;
		background: white;
	}

	.h_add-budget {
		margin-top: 15px;
	}

	.h_add-budget>a {
		font-size: 14px;
		color: #343434;
		border: 1px solid #D6D6D6;
		padding: 3px 40px;
		border-radius: 20px;
	}
	.h_middle-body{
		margin-bottom: 55px !important;
	}
	.h_middle-sbody {
		margin-top: 3px;
		width: 100%;
		height: 80px;
		display: flex;
		flex-direction: row;
	}

	.h_middle-little {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.h_font-title {
		margin-top: 35px;
		color: #777777;
		font-size: 14px;
	}

	.h_font-content {
		margin-top: 15px;
		color: #333333;
		font-size: 18px;
	}

	.h_middle-middle {
		height: 100px;
		border-right: 1px solid #D6D6D6;
		position: relative;
		top: 0px;
	}

	.h_middle-img {
		position: relative;
		top: 0px;
		width: 100%;
	}

	.h_middle-img>img {
		height: 350px;
		margin-right: 15px;
	}

	.h_middle-font>span {
		color: #727272;
		font-size: 20px;
		position: relative;
		top: 0px;
	}

	.h_right {
		height: 100%;
	}

	.h_right-icon {
		margin-top: 9px;
		width: 35px;
		height: 35px;
	}

	.h_littlebody {
		height: 100%;
		width: 100%;
		background-color: #F6F6F6;
	}

	.hi_font {
		height: 60px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.hi_font_book {
		font-size: 16px;
		margin-left: 40px;
		width: calc(100% - 55px);
	}

	.hi_font_manage {
		font-size: 12px;
		width: 40px;
		margin-right: 15px;
	}

	.hi_firstbody {
		margin: 0 auto;
		height: 120px;
		width: 90%;
		border-radius: 10px;
		background-color: white;
		display: flex;
		flex-direction: row;
	}

	.hi_incomepay {
		height: 100%;
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.hi_font-title {
		font-size: 12px;
		color: #777777;
	}
	.hi_font-content {
		margin-top: 15px;
		font-size: 16px;
		color: #000000;
	}
	.hi_huiyuan {
		text-align: left;
		margin: 10px auto;
		width: 90%;
	}
	.hi_huiyuan>span {
		font-size: 12px;
	}
	.hi_zhangben {
		height: calc(100% - 238px);
		background-color: white;
	}
	.hi_title {
		display: flex;
		align-items: center;
		text-align: left;
		height: 50px;
		width: 100%;
	}
	.hi_title>span {
		font-size: 14px;
	}
	.hi_littlered {
		margin: 0 10px;
		height: 18px;
		width: 5px;
		background-color: #F04F4C;
	}
	.book_all {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.book_img {
		position: relative;
		height: 120px;
		width: 100px;
	}
	.book_img>img {
		width: 100%;
		height: 100%;
	}
	.book_img>span {
		font-size: 13px;
		position: absolute;
		writing-mode: tb-rl;
		left: 70px;
		top: 30px;
	}
	.book_incomefont>span {
		font-size: 12px;
		color: #999999;
	}
	.hi_share {
		margin-top: 80px;
		/* margin-bottom: 50px; */
		border-top: 1px solid #ECECEC;
	}
	.homeJL {
		width: 80%;
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		color: white;
		margin: 15px auto;
		border-radius: 15px;
		border: none;
		background: pink;
	}
	.homeTopBox {
		width: 80%;
		margin: 15px auto;
		position: relative;
	}
	.homeNicePic {
		width: 20px;
		height: 20px;
		position: relative;
	}
	.homeSortSpend {
		font-size: 14px;
		font-weight: bold;
		margin-top: 15px;
	}
	.homeShouRu {
		width: 50%;
		margin-top: 20px;
	}
	.homeShouRu>p {
		margin-top: 15px;
	}

	.homeShouRu>img {
		float: right;
	}
	.homeShouRu>span {
		float: left;
	}
	.homeZhiChu {
		width: 50%;
		margin-left: 50%;
		margin-top: 20px;
	}
	.shouruBox {
		margin-top: 10px;
	}
<<<<<<< HEAD
=======
	.sheepHome{
		width: 100%;
		height: 100%;
		background: white;
	}
	
	.h_search{
		position: fixed;
		top: 8px;
		left: 5px;
		z-index: 1;
	}
	.h_search>img{
		height: 30px;
		width: 30px;
	}

	.h_bigbody{
		position: relative;
		top: 44px;
		width: 100%;
		height: calc(100% - 50px);
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: white;
	}
	.h_left{
		height: 100%;
	}
	.h_left-icon{
		margin-top: 7px;
		width: 35px;
		height: 35px;
	}
	.h_middle{
		width: calc(100% - 80px);
		height: 100%;
		background: white;
	}
	.h_add-budget{
		margin-top: 15px;
	}
	.h_add-budget>a{
		font-size: 14px;
		color: #343434;
		border: 1px solid #D6D6D6;
		padding: 3px 40px;
		border-radius: 20px;
	}
	.h_middle-sbody{
		margin-top: 3px;
		width: 100%;
		height: 80px;
		display: flex;
		flex-direction: row;
	}
	.h_middle-little{
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.h_font-title{
		margin-top: 35px;
		color: #777777;
		font-size: 14px;
	}
	.h_font-content{
		margin-top: 15px;
		color: #333333;
		font-size: 18px;
	}
	.h_middle-middle{
		height: 100px;
		border-right:1px solid #D6D6D6;
		position: relative;
		top: 0px;
	}
	.h_middle-img{
		position: relative;
		top: 0px;
	}
	.h_middle-img>img{
		height: 350px;
		margin-right: 15px;
	}
	.h_middle-font>span{
		color: #727272;
		font-size: 20px;
		position: relative;
		top: 0px;
	}
	.h_right{
		height: 100%;
	}
	.h_right-icon{
		margin-top: 9px;
		width: 35px;
		height: 35px;
	}
	.h_littlebody{
		height: 100%;
		width: 100%;
		background-color: #F6F6F6;
	}
	.hi_font{
		height: 60px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.hi_font_book{
		font-size: 16px;
		margin-left: 40px;
		width: calc(100% - 55px);
	}
	.hi_font_manage{
		font-size: 12px;
		width: 40px;
		margin-right: 15px;
	}
	.hi_firstbody{
		margin: 0 auto;
		height: 120px;
		width: 90%;
		border-radius: 10px;
		background-color: white;
	}
	.hi_huiyuan{
		text-align: left;
		margin: 10px auto;
		width: 90%;
	}
	.hi_huiyuan>span{
		font-size: 12px;
	}
	.hi_zhangben{
		height: calc(100% - 238px);
		background-color: white;
		overflow:hidden
	}
>>>>>>> e44b70494407be0916bc0a2b0d2d66709a900103
	.hi_neirong{
		/* height: calc(100% - 238px); */
		width: calc(100% + 10px);
		overflow-y:scroll;
		overflow-x:hidden;
	}
	
</style>
